<ion-header>
  <ion-navbar no-border-bottom>
    <ion-title>规则订阅</ion-title>
    <ion-buttons end>
      <button ion-button (click)="chooseListType()">{{segment=='2'?complementBtn:''}}</button>
    </ion-buttons>
  </ion-navbar>
  <ion-segment class="header_segment" [(ngModel)]="segment" (ionChange)="onSegmentChange($event)">
    <ion-segment-button value="1">
      <span>我的规则</span>
    </ion-segment-button>
    <ion-segment-button value="2">
      <span>所有规则</span>
    </ion-segment-button>
  </ion-segment>
  <ion-toolbar [hidden]="segment=='1'">
    <ion-searchbar placeholder="输入规则名称进行搜索"
                   [(ngModel)]="keyWord" (ionInput)="searchInput($event)">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list *ngIf="segment === '1' && pushDataList.length > 0">
    <ion-item *ngFor="let item of pushDataList">
      <ion-row>
        <ion-col col-1>
          <ion-badge [badgeBgColor]="item.badge_color">{{item.vc_memo}}</ion-badge>
        </ion-col>
        <ion-col>
          {{item.vc_rulename}}
        </ion-col>
        <ion-col col-1 class="ruleCheckboxCol">
          <ion-item class="ruleCheckboxItem">
            <ion-checkbox [(ngModel)]="item.checked" (click)="moreOp(item)"></ion-checkbox>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-item>
  </ion-list>

  <div *ngIf="segment === '2'">
    <ion-item class="blank_item">
      &nbsp;
    </ion-item>
    <ion-card>
      <ion-card-header class="Title" (click)="expandCardEvent('level1')">
        <ion-badge [badgeBgColor]="badge_color_1">1</ion-badge>&nbsp;普通(共{{ruleTree_level1.length}}条)
      </ion-card-header>
      <ion-list [hidden]="!expandCard.level1">
        <ion-item *ngFor="let level1 of ruleTree_level1;let i=index;" class="ruleToggleItem">
          <!--<ion-radio [checked]="level1.checked" value="true" ></ion-radio>-->
          <ion-label>{{level1.vc_rulename}}</ion-label>
          <ion-toggle [(ngModel)]="level1.l_wanted" (ionChange)="openSubscribe(level1)"></ion-toggle>
        </ion-item>
      </ion-list>
    </ion-card>

    <ion-card>
      <ion-card-header class="Title" (click)="expandCardEvent('level2')">
        <ion-badge [badgeBgColor]="badge_color_2">2</ion-badge>&nbsp;一般(共{{ruleTree_level2.length}}条)
      </ion-card-header>
      <ion-list [hidden]="!expandCard.level2">
        <ion-item *ngFor="let level2 of ruleTree_level2" class="ruleToggleItem">
          <!--<ion-radio [(ngModel)]="level2.checked" value="true"></ion-radio>-->
          <ion-label>{{level2.vc_rulename}}</ion-label>
            <ion-toggle [(ngModel)]="level2.l_wanted" (ionChange)="openSubscribe(level2)"></ion-toggle>
        </ion-item>
      </ion-list>
    </ion-card>

    <ion-card>
      <ion-card-header class="Title" (click)="expandCardEvent('level3')">
        <ion-badge [badgeBgColor]="badge_color_3">3</ion-badge>&nbsp;较急(共{{ruleTree_level3.length}}条)
      </ion-card-header>
      <ion-list [hidden]="!expandCard.level3">
        <ion-item *ngFor="let level3 of ruleTree_level3" class="ruleToggleItem">
          <!--<ion-radio [(ngModel)]="level3.checked" value="true"></ion-radio>-->
          <ion-label>{{level3.vc_rulename}}</ion-label>
          <ion-toggle [(ngModel)]="level3.l_wanted" (ionChange)="openSubscribe(level3)"></ion-toggle>
        </ion-item>
      </ion-list>
    </ion-card>

    <ion-card>
      <ion-card-header class="Title" (click)="expandCardEvent('level4')">
        <ion-badge [badgeBgColor]="badge_color_4">4</ion-badge>&nbsp;紧急(共{{ruleTree_level4.length}}条)
      </ion-card-header>
      <ion-list [hidden]="!expandCard.level4">
        <ion-item *ngFor="let level4 of ruleTree_level4" class="ruleToggleItem">
          <!--<ion-radio [(ngModel)]="level4.checked" value="true"></ion-radio>-->
          <ion-label>{{level4.vc_rulename}}</ion-label>
          <ion-toggle [(ngModel)]="level4.l_wanted" (ionChange)="openSubscribe(level4)"></ion-toggle>
        </ion-item>
      </ion-list>
    </ion-card>

    <ion-card>
      <ion-card-header class="Title" (click)="expandCardEvent('level5')">
        <ion-badge [badgeBgColor]="badge_color_5">5</ion-badge>&nbsp;特急(共{{ruleTree_level5.length}}条)
      </ion-card-header>
      <ion-list [hidden]="!expandCard.level5">
        <ion-item *ngFor="let level5 of ruleTree_level5" class="ruleToggleItem">
          <!--<ion-radio [(ngModel)]="level5.checked" value="true"></ion-radio>-->
          <ion-label>{{level5.vc_rulename}}</ion-label>
          <ion-toggle [(ngModel)]="level5.l_wanted" (ionChange)="openSubscribe(level5)"></ion-toggle>
        </ion-item>
      </ion-list>
    </ion-card>
  </div>
</ion-content>
